<script setup>
import {ref} from 'vue'
import {showMsg} from '@/components/Util';
import axios from 'axios';
import { onMounted} from 'vue';
import XxAdd from '@/components/xinxi/XxAdd.vue';
let title = ref();
let list = ref([]);
const input1 = ref('')
function getData(){
    axios.get('/api/user_list').then(res=>{
        if(res.data.status==200){
            list.value = res.data.data;
        }else{
            showMsg("数据获取失败",'error',2000);
        }   
    })
}
onMounted(()=>{
    getData();
})
function newUser(){
    addshow.value = false;
    getData();
}


function sc(arr){
    let res = {}
    for(let i=0;i<arr.length;i++){
        if(arr[i].id in res){
            res[arr[i].id].remark += ','+arr[i].remark;
        }else{
            res[arr[i].id] = arr[i];
        }
    }
    return res;
}

let addshow = ref(false);
let user = ref({id:'',username:'',phone:'',sfz:''})

//修改
function edit(id){
    //显示表单窗口
    //显示数据到窗口
    addshow.value = true;
    //list [{},{}]
    let obj = list.value.filter(item=>item.id==id);
    console.log(item.id);
    user.value = obj[0];
    optype.value = 'edit';
    title.value = '修改学生'
}

</script>

<template>
    <XxAdd :title="title" :list2="list" :type="optype" :user = "user" v-show="addshow" @submit="newUser"></XxAdd>
<div class="app">
        <span>个人信息</span>
</div>
<!-- <button @click="edit(item.id)">修改</button> -->
<ul class="item" v-for="item in list" :key="item.id">
    <li>用户名：{{ item.username }}</li>
    <!-- <li>密码：{{ item.pwd }}</li> -->
    <li>电话号：{{ item.phone }}</li>
    <li>身份证号：{{ item.sfz }}</li>
</ul>
</template>

<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    .app{
        display: flex;
        width: 800px;
        height: 130px;
    }
    span{
        width: 200px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 360px;
        font-size: 23px;
        color: white;
        /* border: 1px red solid; */
        background-color:rgb(31, 53, 59);
        margin-top: 65px;
    }
    button{
        width: 80px;
        height: 30px;
        font-size: 17px;
        background-color:rgb(31, 53, 59);
        color: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 620px;
    }
    ul{
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 45px;
        color: black;
        font-weight: bold;
        margin-left: 355px;
        margin-top: 50px;
    }
</style>